<template>
  <!-- 诊断专题专栏 -->
  <div class="list_title">诊断专题</div>
  <div class="map_list">
    <div>
      <div class="img_map_box" @click="showMark">
        <img src="@/assets/images/HJG.png" alt="" />
        <div class="map_active" v-show="SQ_flag">
          <img src="@/assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>混接管</div>
    </div>
    <div style="margin-left: 10px">
      <div class="img_map_box" @click="showOpinion">
        <img src="@/assets/images/DXG.png" alt="" />
        <div class="map_active" v-show="YJGL_flag">
          <img src="@/assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>大小管</div>
    </div>
    <div style="margin-left: 10px">
      <div class="img_map_box" @click="showMeasurement">
        <img src="@/assets/images/NPG.png" alt="" />
        <div class="map_active" v-show="CL_flag">
          <img src="@/assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>逆坡管</div>
    </div>
    <div style="margin-left: 10px">
      <div class="img_map_box" @click="showDraw">
        <img src="@/assets/images/TGG.png" alt="" />
        <div class="map_active" v-show="HT_flag">
          <img src="@/assets/images/input-checked.png" alt="" />
        </div>
      </div>
      <div>抬高管</div>
    </div>
  </div>
  <!-- 诊断专题展开表单 -->
  <div class="info_box">
    <!-- 大小管 逆坡管 -->
    <div id="show_info_div_a" v-show="showDia2">
      <table
        id="table2_a"
        class="table"
        cellspacing="0"
        cellpadding="3"
        border="0"
        style="transform: translateY(4px)"
      >
        <thead>
          <tr class="tr">
            <th class="th th_first_a">序号</th>
            <th class="th th_second_a">子类</th>
            <th class="th th_third_a">管径</th>
            <th class="th th_forth_a">管长</th>
            <th class="th th_fifth_a">操作</th>
          </tr>
        </thead>
        <tbody id="hjg_data" style="display: none">
          <tr class="tr_second">
            <td class="th td_first">1</td>
            <td class="th td_first">雨水管网</td>
            <td class="th td_first">1000</td>
            <td class="th td_first" id="td4">46.32</td>
            <td class="th td_forth" id="td4">
              <span>定位</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 混接管  -->
    <div id="show_info_div_a" v-show="showDia3">
      <table
        id="table2_a"
        class="table"
        cellspacing="0"
        cellpadding="3"
        border="0"
        style="transform: translateY(4px)"
      >
        <thead>
          <tr class="tr">
            <th class="th th_first_b">序号</th>
            <th class="th th_second_b">子类</th>
            <th class="th th_third_b">管径</th>
            <th class="th th_forth_b">管长</th>
            <th class="th th_fifth_b">操作</th>
          </tr>
        </thead>
        <tbody id="hjg_data" style="display: none">
          <tr class="tr_second">
            <td class="th td_first">1</td>
            <td class="th td_first">雨水管网</td>
            <td class="th td_first">1000</td>
            <td class="th td_first" id="td4">46.32</td>
            <td class="th td_forth" id="td4">
              <span>定位</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 抬高管 -->
    <div id="show_info_div_a" v-show="showDia4">
      <table
        id="table2_a_a"
        class="table"
        cellspacing="0"
        cellpadding="3"
        border="0"
        style="transform: translateY(4px)"
      >
        <thead>
          <tr class="tr">
            <th class="th th_first_c">序号</th>
            <th class="th th_second_c">子类</th>
            <th class="th th_third_c">管径</th>
            <th class="th th_forth_c">管长</th>
            <th class="th th_fifth_c">操作</th>
          </tr>
        </thead>
        <tbody id="hjg_data" style="display: none">
          <tr class="tr_second">
            <td class="th td_first">1</td>
            <td class="th td_first">雨水管网</td>
            <td class="th td_first">1000</td>
            <td class="th td_first" id="td4">46.32</td>
            <td class="th td_forth" id="td4">
              <span>定位</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 通用tbody -->
    <div id="show_info_div" v-show="showDia">
      <div class="table-container" id="show_ywinfo_table">
        <table
          id="table2"
          class="table"
          cellspacing="0"
          cellpadding="3"
          border="0"
        >
          <tbody id="hjg_data">
            <tr
              class="tr_second"
              v-for="item in diaArr"
              :key="item.id"
              @click="flytoDia(item)"
            >
              <td class="th td_first">{{ item.id }}</td>
              <td class="th td_first">{{ item.type }}</td>
              <td class="th td_first">{{ item.diameter }}</td>
              <td class="th td_first" id="td4">{{ item.longth }}</td>
              <td class="th td_forth" id="td4">
                <span>定位</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div :class="loding">
          <img src="@/assets/images/loading.gif" />
        </div>
      </div>
    </div>
    <!-- 抬高管专用 -->
    <div id="show_info_div" v-show="showDia5">
      <div class="table-container" id="show_ywinfo_table">
        <table
          id="table2_b"
          class="table"
          cellspacing="0"
          cellpadding="3"
          border="0"
        >
          <tbody id="hjg_data">
            <tr
              class="tr_second"
              v-for="item in diaArr"
              :key="item.id"
              @click="flytoDia(item)"
            >
              <td class="th td_first">0{{ item.id }}</td>
              <td class="th td_first">{{ item.type }}</td>
              <td class="th td_first">{{ item.diameter }}</td>
              <td class="th td_first" id="td4">{{ item.longth }}</td>
              <td class="th td_forth" id="td4">
                <span>定位</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div :class="loding">
          <img src="@/assets/images/loading.gif" />
        </div>
      </div>
    </div>
  </div>
  <!-- 诊断专题通用弹窗-->
  <div ref="popWater">
    <div class="bufferPoint PCwater">
      <div class="contentPanePoint">
        <div>
          <table>
            <tbody>
              <!-- 表头 -->
              <div>
                <div class="first_line">
                  <div>详细信息</div>
                  <div class="close titleButton" @click="closePopupWater">
                    ×
                  </div>
                </div>
              </div>
              <!-- 表单信息 -->
              <div>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.FEATID }}</b>
                  </td>
                  <td>{{ Iwater.FEATID }}</td>
                </tr>

                <tr>
                  <td class="td">
                    <b>{{ IwaterName.SUBTYPE }}</b>
                  </td>
                  <td>{{ Iwater.SUBTYPE }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.DMCC }}</b>
                  </td>
                  <td>{{ Iwater.DMCC }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.Material }}</b>
                  </td>
                  <td>{{ Iwater.Material }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.GDBH }}</b>
                  </td>
                  <td>{{ Iwater.GDBH }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.GDGG }}</b>
                  </td>
                  <td>{{ Iwater.GDGG }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.SLFX }}</b>
                  </td>
                  <td>{{ Iwater.SLFX }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.QDBM }}</b>
                  </td>
                  <td>{{ Iwater.QDBM }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.ZDBM }}</b>
                  </td>
                  <td>{{ Iwater.ZDBM }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.QDMS }}</b>
                  </td>
                  <td>{{ Iwater.QDMS }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.ZDMS }}</b>
                  </td>
                  <td>{{ Iwater.ZDMS }}</td>
                </tr>
                <!--  -->
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.QDNDBG }}</b>
                  </td>
                  <td>{{ Iwater.QDNDBG }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.ZDNDBG }}</b>
                  </td>
                  <td>{{ Iwater.ZDNDBG }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.SFYY }}</b>
                  </td>
                  <td>{{ Iwater.SFYY }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.MSFS }}</b>
                  </td>
                  <td>{{ Iwater.MSFS }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.SZWZ }}</b>
                  </td>
                  <td>{{ Iwater.SZWZ }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.YXZT }}</b>
                  </td>
                  <td>{{ Iwater.YXZT }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.TCDW }}</b>
                  </td>
                  <td>{{ Iwater.TCDW }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.TCRQ }}</b>
                  </td>
                  <td>{{ Iwater.TCRQ }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.GSLX }}</b>
                  </td>
                  <td>{{ Iwater.GSLX }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.HJBM }}</b>
                  </td>
                  <td>{{ Iwater.HJBM }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.TFHID }}</b>
                  </td>
                  <td>{{ Iwater.TFHID }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.Remark }}</b>
                  </td>
                  <td>{{ Iwater.Remark }}</td>
                </tr>
                <tr>
                  <td class="td">
                    <b>{{ IwaterName.longth }}</b>
                  </td>
                  <td>{{ Iwater.longth }}</td>
                </tr>
              </div>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onMounted,
  ref,
  toRaw,
  defineComponent,
  reactive,
  watch,
  nextTick,
} from "vue";
import {
  userMap,
  switchList5,
  switchList6,
  switchList7,
  switchList8,
  switchList9,
} from "@/store/index";
import { Map } from "ol";
import View from "ol/View.js";
import ScaleLine from "ol/control/ScaleLine";
import "ol/ol.css";
import { mapUrl } from "@/store/map";
import Tile from "ol/layer/Tile";
import { Stroke, Style, Circle, Fill } from "ol/style";
import VectorLayer from "ol/layer/Vector.js";
import VectorSource from "ol/source/Vector.js";
import Feature from "ol/Feature.js";
import LineString from "ol/geom/LineString.js";
import Overlay from "ol/Overlay"; // 引入覆盖物模块
import Text from "ol/style/Text.js";
import Select from "ol/interaction/Select.js";
import * as turf from "@turf/turf"; //引入turf做buffer缓冲区分析
import * as format from "ol/format";
import Polygon from "ol/geom/Polygon.js";
import GeoJSON from "ol/format/GeoJSON.js";
import { message } from "ant-design-vue";
import Point from "ol/geom/Point.js";
import { composeCssTransform } from "ol/transform";
import { defaults as defaultControls } from "ol/control";
import { transform } from "ol/proj";
import * as olExtent from "ol/extent";
import { getBottomLeft } from "ol/extent";
import Icon from "ol/style/Icon.js";
import { IconImage } from "ol/style";
import { feature } from "@turf/turf";
import { Source } from "ol/source";
import { require } from "@/utils/require";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import TileGrid from "ol/tilegrid/TileGrid";
// 引入饿了么UI
import "element-plus/es/components/message/style/css";
import { ElMessage } from "element-plus";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { HJMap } from "@/views/map/mapHooks/ArcGisMap.js";
import axios from "axios";
let map = userMap(); //接收
let list;
//工程专题与诊断专题的弹窗互斥
let storeKJCX = switchList5();
let storeRepair = switchList6();
let storeDetect = switchList7();
let storeCube = switchList8();
let storeDia = switchList9();
// 高亮
const SQ_flag = ref(false);
const YJGL_flag = ref(false);
const CL_flag = ref(false);
const HT_flag = ref(false);
// loading
const loding = ref({
  loding_img_change: false,
  loding_img: true,
});
// 展示表单
const showDia = ref(false);
const showDia2 = ref(false);
const showDia3 = ref(false);
const showDia4 = ref(false);
const showDia5 = ref(false);
// 表单数据
const diaArr = ref([]);
let HJFeature;
let HJSource;
let HJLayer;
let overlayZD; //混接弹窗
let HJarr = ref([]); //用于图层展示--混接
let HJtable = ref([]); //用与表单--混接
let DXarr = ref([]); //用于图层展示--大小
let DXtable = ref([]); //用与表单--大小
let NParr = ref([]); //用于图层展示--逆坡
let NPtable = ref([]); //用与表单--逆坡
let TGarr = ref([]); //用于图层展示--抬高
let TGtable = ref([]); //用与表单--抬高
//注册点击
let ZDClick;
onMounted(() => {
  list = toRaw(map.map);
  // 弹窗键
  IwaterName.FEATID = "要素编码 :";
  IwaterName.SUBTYPE = "子类 :";
  IwaterName.DMCC = "断面尺寸 :";
  IwaterName.Material = "材质 :";
  IwaterName.GDBH = "壁厚 :";
  IwaterName.GDGG = "规格 :";
  IwaterName.SLFX = "流向 :";
  IwaterName.QDBM = "起点编码 :";
  IwaterName.ZDBM = "终点编码 :";
  IwaterName.QDMS = "起点埋深 :";
  IwaterName.ZDMS = "终点埋深 :";
  IwaterName.QDNDBG = "起点内底标高 :";
  IwaterName.ZDNDBG = "终点内底标高 :";
  IwaterName.SFYY = "是否有压 :";
  IwaterName.MSFS = "埋设方式 :";
  IwaterName.SZWZ = "所在位置 :";
  IwaterName.YXZT = "运行状态 :";
  IwaterName.TCDW = "探测单位 :";
  IwaterName.TCRQ = "探测日期 :";
  IwaterName.GSLX = "归属 :";
  IwaterName.HJBM = "混接编码 :";
  IwaterName.TFHID = "图幅号 :";
  IwaterName.Remark = "备注 :";
  IwaterName.longth = "管长 :";
  // 注册点击
  ZDClick = new Select();
  list.addInteraction(ZDClick);
  /* 混接图层 */
  HJSource = new VectorSource({
    wrapX: false,
  });
  HJLayer = new VectorLayer({
    title: "HJLayer",
    className: "HJLayer",
    source: HJSource,
    zIndex: 9999,
  });
  list.addLayer(HJLayer);
  /* 混接弹窗 */
  // 水质点弹窗图层
  overlayZD = new Overlay({
    element: popWater.value, // 弹窗标签，在html里
    autoPan: true, // 如果弹窗在底图边缘时，底图会移动
    positioning: "center-center",
    // autoPanAnimation: {
    //   duration: 250,
    // },
  });
  list.addOverlay(overlayZD);
  // 混接获取要素
  axios({
    url: "http://58.210.32.10:9068/arcgis/rest/services/KSSW_DATA/ZT_ZDZT_HJG/MapServer/0/query?f=json&where=1%3D1&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=*",
    transformRequest: (data, headers) => {
      delete headers.auth;
      return data;
    },
    method: "get",
  }).then((res) => {
    if (res.data != undefined || res.data.length >= 1) {
      const arrX = res.data;
      HJarr.value = res.data; //用于图层展示
      if (arrX.features != undefined) {
        const arr = arrX.features;
        const HJarr_ = [];
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].attributes.SUBTYPE == 1) {
            type.value = "雨水管网";
          } else if (arr[i].attributes.SUBTYPE == 2) {
            type.value = "污水管网";
          }
          const longth = Number(arr[i].attributes.SHAPE_Length).toFixed(2);
          const obj = {
            id: i + 1, // 序号
            type: type.value, //子类
            diameter: arr[i].attributes.GDGG, //管径
            longth: longth, //管长
            co: arr[i].geometry.paths[0], //管线坐标
            attr: arr[i].attributes,
            layer: "HJLayer",
          };
          HJarr_.push(obj);
          // HJarr.value = HJarr_
        }

        HJtable.value = HJarr_;
      } else {
        console.log("暂无数据");
      }
    }
  });
  // 大小管获取要素
  axios({
    url: "http://58.210.32.10:9068/arcgis/rest/services/KSSW_DATA/ZT_ZDZT_DXG/MapServer/0/query?f=json&where=1%3D1&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=*",
    transformRequest: (data, headers) => {
      delete headers.auth;
      return data;
    },
    method: "get",
  }).then((res) => {
    console.log("大小管", res.data);
    if (res.data != undefined || res.data.length >= 1) {
      const arrX = res.data;
      DXarr.value = res.data; //用于图层展示
      if (arrX.features != undefined) {
        const arr = arrX.features;
        const HJarr_ = [];
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].attributes.SUBTYPE == 1) {
            type.value = "雨水管网";
          } else if (arr[i].attributes.SUBTYPE == 2) {
            type.value = "污水管网";
          }
          const longth = Number(arr[i].attributes.SHAPE_Length).toFixed(2);
          const obj = {
            id: i + 1, // 序号
            type: type.value, //子类
            diameter: arr[i].attributes.GDGG, //管径
            longth: longth, //管长
            co: arr[i].geometry.paths[0], //管线坐标
            attr: arr[i].attributes,
            layer: "HJLayer",
          };
          HJarr_.push(obj);
          // HJarr.value = HJarr_
        }

        DXtable.value = HJarr_;
      } else {
        console.log("暂无数据");
      }
    }
  });
  // 逆坡管获取要素
  axios({
    url: "http://58.210.32.10:9068/arcgis/rest/services/KSSW_DATA/ZT_ZDZT_NPG/MapServer/0/query?f=json&where=1%3D1&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=*",
    transformRequest: (data, headers) => {
      delete headers.auth;
      return data;
    },
    method: "get",
  }).then((res) => {
    console.log("逆坡管", res.data);
    if (res.data != undefined || res.data.length >= 1) {
      const arrX = res.data;
      NParr.value = res.data; //用于图层展示
      if (arrX.features != undefined) {
        const arr = arrX.features;
        const HJarr_ = [];
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].attributes.SUBTYPE == 1) {
            type.value = "雨水管网";
          } else if (arr[i].attributes.SUBTYPE == 2) {
            type.value = "污水管网";
          }
          const longth = Number(arr[i].attributes.SHAPE_Length).toFixed(2);
          const obj = {
            id: i + 1, // 序号
            type: type.value, //子类
            diameter: arr[i].attributes.GDGG, //管径
            longth: longth, //管长
            co: arr[i].geometry.paths[0], //管线坐标
            attr: arr[i].attributes,
            layer: "HJLayer",
          };
          HJarr_.push(obj);
        }

        NPtable.value = HJarr_;
      } else {
        console.log("暂无数据");
      }
    }
  });
  // 抬高管获取要素
  axios({
    url: "http://58.210.32.10:9068/arcgis/rest/services/KSSW_DATA/ZT_ZDZT_TGG/MapServer/0/query?f=json&where=1%3D1&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=*",
    transformRequest: (data, headers) => {
      delete headers.auth;
      return data;
    },
    method: "get",
  }).then((res) => {
    console.log("抬高管", res.data);
    if (res.data != undefined || res.data.length >= 1) {
      const arrX = res.data;
      TGarr.value = res.data; //用于图层展示
      if (arrX.features != undefined) {
        const arr = arrX.features;
        const HJarr_ = [];
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].attributes.SUBTYPE == 1) {
            type.value = "雨水管网";
          } else if (arr[i].attributes.SUBTYPE == 2) {
            type.value = "污水管网";
          }
          const longth = Number(arr[i].attributes.SHAPE_Length).toFixed(2);
          const obj = {
            id: i + 1, // 序号
            type: type.value, //子类
            diameter: arr[i].attributes.GDGG, //管径
            longth: longth, //管长
            co: arr[i].geometry.paths[0], //管线坐标
            attr: arr[i].attributes,
            layer: "HJLayer",
          };
          HJarr_.push(obj);
        }

        TGtable.value = HJarr_;
      } else {
        console.log("暂无数据");
      }
    }
  });
});
/* 诊断专题与工程专题的互斥 */
watch(storeDia, () => {
  console.log("诊断打开", storeDia.queryBtn);
  if (toRaw(storeDia.queryBtn) == false) {
    console.log("诊断关闭", storeDia.queryBtn);
    showDia.value = false;
    showDia2.value = false;
    showDia3.value = false;
    showDia4.value = false;
    showDia5.value = false;
    HJSource.clear();
    list.removeInteraction(ZDClick);
    SQ_flag.value = false;
    YJGL_flag.value = false;
    CL_flag.value = false;
    HT_flag.value = false;
    storeDia.queryBtn = true;
  }
});
/* 混接管 */
const type = ref("");
const showMark = () => {
  SQ_flag.value = !SQ_flag.value;
  YJGL_flag.value = false;
  CL_flag.value = false;
  HT_flag.value = false;
  showDia.value = true;
  showDia2.value = false;
  showDia3.value = true;
  showDia4.value = false;
  showDia5.value = false;
  if (SQ_flag.value == false) {
    showDia.value = false;
    showDia3.value = false;
    HJSource.clear();
    list.removeInteraction(ZDClick);
    storeDia.queryBtn = false;
  } else {
    /* 打开诊断关闭工程 */
    if (
      toRaw(storeKJCX.queryBtn) == true ||
      toRaw(storeRepair.queryBtn) == true ||
      toRaw(storeDetect.queryBtn) == true ||
      toRaw(storeCube.queryBtn) == true
    ) {
      storeKJCX.queryBtn = false;
      storeRepair.queryBtn = false;
      storeDetect.queryBtn = false;
      storeCube.queryBtn = false;
    }
    list.getView().setZoom(0);
    list.getView().setCenter([24632, 69653]);
    HJSource.clear();
    // console.log('进入混接绘制', HJtable.value)
    diaArr.value = HJtable.value; //用于表单
    openlist();
    TroubleClick(); //注册点击
    storeDia.queryBtn = true;
  }
};
/* 大小管 */
const showOpinion = () => {
  SQ_flag.value = false;
  YJGL_flag.value = !YJGL_flag.value;
  CL_flag.value = false;
  HT_flag.value = false;
  showDia.value = true;
  showDia2.value = true;
  showDia3.value = false;
  showDia4.value = false;
  showDia5.value = false;
  if (YJGL_flag.value == false) {
    showDia.value = false;
    showDia2.value = false;
    HJSource.clear();
    list.removeInteraction(ZDClick);
    storeDia.queryBtn = false;
  } else {
    /* 打开诊断关闭工程 */
    if (
      toRaw(storeKJCX.queryBtn) == true ||
      toRaw(storeRepair.queryBtn) == true ||
      toRaw(storeDetect.queryBtn) == true ||
      toRaw(storeCube.queryBtn) == true
    ) {
      storeKJCX.queryBtn = false;
      storeRepair.queryBtn = false;
      storeDetect.queryBtn = false;
      storeCube.queryBtn = false;
    }
    list.getView().setZoom(0);
    list.getView().setCenter([24632, 69653]);
    HJSource.clear();
    diaArr.value = DXtable.value; //用于表单
    openlist();
    TroubleClick(); //注册点击
    storeDia.queryBtn = true;
  }
};
/* 逆坡管 */
const showMeasurement = () => {
  SQ_flag.value = false;
  YJGL_flag.value = false;
  CL_flag.value = !CL_flag.value;
  HT_flag.value = false;
  showDia.value = true;
  showDia2.value = true;
  showDia3.value = false;
  showDia4.value = false;
  showDia5.value = false;
  if (CL_flag.value == false) {
    showDia.value = false;
    showDia2.value = false;
    HJSource.clear();
    list.removeInteraction(ZDClick);
    storeDia.queryBtn = false;
  } else {
    /* 打开诊断关闭工程 */
    if (
      toRaw(storeKJCX.queryBtn) == true ||
      toRaw(storeRepair.queryBtn) == true ||
      toRaw(storeDetect.queryBtn) == true ||
      toRaw(storeCube.queryBtn) == true
    ) {
      storeKJCX.queryBtn = false;
      storeRepair.queryBtn = false;
      storeDetect.queryBtn = false;
      storeCube.queryBtn = false;
    }
    list.getView().setZoom(0);
    list.getView().setCenter([24632, 69653]);
    HJSource.clear();
    diaArr.value = NPtable.value; //用于表单
    openlist();
    TroubleClick(); //注册点击
    storeDia.queryBtn = true;
  }
};
/* 抬高管 */
const showDraw = () => {
  SQ_flag.value = false;
  YJGL_flag.value = false;
  CL_flag.value = false;
  HT_flag.value = !HT_flag.value;
  showDia.value = false;
  showDia2.value = false;
  showDia3.value = false;
  showDia4.value = true;
  showDia5.value = true;
  if (HT_flag.value == false) {
    showDia4.value = false;
    showDia5.value = false;
    console.log("抬高管");
    HJSource.clear();
    list.removeInteraction(ZDClick);
    storeDia.queryBtn = false;
  } else {
    /* 打开诊断关闭工程 */
    if (
      toRaw(storeKJCX.queryBtn) == true ||
      toRaw(storeRepair.queryBtn) == true ||
      toRaw(storeDetect.queryBtn) == true ||
      toRaw(storeCube.queryBtn) == true
    ) {
      storeKJCX.queryBtn = false;
      storeRepair.queryBtn = false;
      storeDetect.queryBtn = false;
      storeCube.queryBtn = false;
    }
    list.getView().setZoom(0);
    list.getView().setCenter([24632, 69653]);
    HJSource.clear();
    diaArr.value = TGtable.value; //用于表单
    openlist();
    TroubleClick(); //注册点击
    storeDia.queryBtn = true;
  }
};
/* 打开表单 */
const openlist = () => {
  if (toRaw(HJarr.value).features != undefined) {
    if (toRaw(HJarr.value).features.length >= 1 && SQ_flag.value == true) {
      const arr = toRaw(HJarr.value).features;
      for (let i = 0; i < arr.length; i++) {
        const str = arr[i].geometry.paths[0];
        HJFeature = new Feature({
          geometry: new LineString(str),
          layerName: "HJLayer",
          attr: arr[i].attributes,
          co: arr[i].geometry.paths[0],
        });
        if (arr[i].attributes.SUBTYPE == 1) {
          HJFeature.setStyle(
            new Style({
              stroke: new Stroke({
                color: `#0070ff`,
                width: 3,
              }),
            })
          );
        } else if (arr[i].attributes.SUBTYPE == 2) {
          HJFeature.setStyle(
            new Style({
              stroke: new Stroke({
                color: `#ffaa00`,
                width: 3,
              }),
            })
          );
        }
        HJSource.addFeature(HJFeature);
      }
      loding.value = {
        loding_img_change: true,
        loding_img: false,
      };
    } else if (
      toRaw(DXarr.value).features.length >= 1 &&
      YJGL_flag.value == true
    ) {
      const arr = toRaw(DXarr.value).features;

      for (let i = 0; i < arr.length; i++) {
        const str = arr[i].geometry.paths[0];
        HJFeature = new Feature({
          geometry: new LineString(str),
          layerName: "HJLayer",
          attr: arr[i].attributes,
          co: arr[i].geometry.paths[0],
        });
        if (arr[i].attributes.SUBTYPE == 1) {
          HJFeature.setStyle(
            new Style({
              stroke: new Stroke({
                color: `#0070ff`,
                width: 3,
              }),
            })
          );
        } else if (arr[i].attributes.SUBTYPE == 2) {
          HJFeature.setStyle(
            new Style({
              stroke: new Stroke({
                color: `#ffaa00`,
                width: 3,
              }),
            })
          );
        }
        HJSource.addFeature(HJFeature);
      }
      loding.value = {
        loding_img_change: true,
        loding_img: false,
      };
    } else if (
      toRaw(NParr.value).features.length >= 1 &&
      CL_flag.value == true
    ) {
      const arr = toRaw(NParr.value).features;
      for (let i = 0; i < arr.length; i++) {
        const str = arr[i].geometry.paths[0];
        HJFeature = new Feature({
          geometry: new LineString(str),
          layerName: "HJLayer",
          attr: arr[i].attributes,
          co: arr[i].geometry.paths[0],
        });
        if (arr[i].attributes.SUBTYPE == 1) {
          HJFeature.setStyle(
            new Style({
              stroke: new Stroke({
                color: `#0070ff`,
                width: 3,
              }),
            })
          );
        } else if (arr[i].attributes.SUBTYPE == 2) {
          HJFeature.setStyle(
            new Style({
              stroke: new Stroke({
                color: `#ffaa00`,
                width: 3,
              }),
            })
          );
        }
        HJSource.addFeature(HJFeature);
      }
      loding.value = {
        loding_img_change: true,
        loding_img: false,
      };
    } else if (
      toRaw(TGarr.value).features.length >= 1 &&
      HT_flag.value == true
    ) {
      const arr = toRaw(TGarr.value).features;
      for (let i = 0; i < arr.length; i++) {
        const str = arr[i].geometry.paths[0];
        HJFeature = new Feature({
          geometry: new LineString(str),
          layerName: "HJLayer",
          attr: arr[i].attributes,
          co: arr[i].geometry.paths[0],
        });
        if (arr[i].attributes.SUBTYPE == 1) {
          HJFeature.setStyle(
            new Style({
              stroke: new Stroke({
                color: `#0070ff`,
                width: 3,
              }),
            })
          );
        } else if (arr[i].attributes.SUBTYPE == 2) {
          HJFeature.setStyle(
            new Style({
              stroke: new Stroke({
                color: `#ffaa00`,
                width: 3,
              }),
            })
          );
        }
        HJSource.addFeature(HJFeature);
      }
      loding.value = {
        loding_img_change: true,
        loding_img: false,
      };
    }
  } else {
    console.log("暂无数据");
  }
};
/* 诊断--混接弹窗 */
const popWater = ref(null); // 弹窗容器(混接)
// 弹窗键
const IwaterName = reactive({
  FEATID: "", //要素编码
  SUBTYPE: "", //子类
  DMCC: "", //断面尺寸
  Material: "", //材质
  GDBH: "", //壁厚
  GDGG: "", //规格
  SLFX: "", //流向
  QDBM: "", //起点编码
  ZDBM: "", //终点编码
  QDMS: "", //起点埋深
  ZDMS: "", //终点埋深
  QDNDBG: "", //起点内底标高
  ZDNDBG: "", //终点内底标高
  SFYY: "", //是否有压
  MSFS: "", //埋设方式
  SZWZ: "", // 所在位置
  YXZT: "", // 运行状态
  TCDW: "", // 探测单位
  TCRQ: "", // 探测日期
  GSLX: "", // 归属
  HJBM: "", // 混接编码
  TFHID: "", // 图幅号
  Remark: "", // 备注
  longth: "", // 管长--
});
// 弹窗值
const Iwater = reactive({
  FEATID: "", //要素编码
  SUBTYPE: "", //子类
  DMCC: "", //断面尺寸
  Material: "", //材质
  GDBH: "", //壁厚
  GDGG: "", //规格
  SLFX: "", //流向
  QDBM: "", //起点编码
  ZDBM: "", //终点编码
  QDMS: "", //起点埋深
  ZDMS: "", //终点埋深
  QDNDBG: "", //起点内底标高
  ZDNDBG: "", //终点内底标高
  SFYY: "", //是否有压
  MSFS: "", //埋设方式
  SZWZ: "", // 所在位置
  YXZT: "", // 运行状态
  TCDW: "", // 探测单位
  TCRQ: "", // 探测日期
  GSLX: "", // 归属
  HJBM: "", // 混接编码
  TFHID: "", // 图幅号
  Remark: "", // 备注
  longth: "", // 管长--
});
/* 定位飞行 */
const flytoDia = (val) => {
  const obj = toRaw(val);
  const attr = obj.attr;
  // 弹窗值--进入诊断
  if (obj.layer == "HJLayer") {
    // console.log('飞行', obj.co[0])
    Iwater.FEATID = attr.FEATID;
    Iwater.SUBTYPE = attr.SUBTYPE;
    Iwater.DMCC = attr.DMCC;
    Iwater.Material = attr.Material;
    Iwater.GDBH = attr.GDBH;
    Iwater.GDGG = attr.GDGG;
    Iwater.SLFX = attr.SLFX;
    Iwater.QDBM = attr.QDBM;
    Iwater.ZDBM = attr.ZDBM;
    Iwater.QDMS = attr.QDMS;
    Iwater.ZDMS = attr.ZDMS;
    Iwater.QDNDBG = attr.QDNDBG;
    Iwater.ZDNDBG = attr.ZDNDBG;
    Iwater.SFYY = attr.SFYY;
    Iwater.MSFS = attr.MSFS;
    Iwater.SZWZ = attr.SZWZ;
    Iwater.YXZT = attr.YXZT;
    Iwater.TCDW = attr.TCDW;
    Iwater.TCRQ = attr.TCRQ;
    Iwater.GSLX = attr.GSLX;
    Iwater.HJBM = attr.HJBM;
    Iwater.TFHID = attr.TFHID;
    Iwater.Remark = attr.Remark;
    Iwater.longth = attr.longth;
  }
  list.getView().setResolution(0.52916772500211673);
  list.getView().setCenter(obj.co[0]);
  overlayZD.setPosition(obj.co[0]);
};
// 注册点击
const TroubleClick = () => {
  ZDClick.on("select", async function (e) {
    if (e.target.getFeatures().getArray()[0] != undefined) {
      const JudgeFeature = e.target
        .getFeatures()
        .getArray()[0]
        .getGeometry()
        .getType();
      // console.log('判断选择要素类型', JudgeFeature)
      const Judgelayer = e.selected[0].get("layerName");
      const JudgeValue = e.selected[0].get("attr");
      const JudgeCo = e.selected[0].get("co");
      const selectCo = e.mapBrowserEvent.coordinate;
      if (Judgelayer == "HJLayer") {
        console.log("HJLayer", JudgeValue);
        const attr = JudgeValue;
        Iwater.FEATID = attr.FEATID;
        Iwater.SUBTYPE = attr.SUBTYPE;
        Iwater.DMCC = attr.DMCC;
        Iwater.Material = attr.Material;
        Iwater.GDBH = attr.GDBH;
        Iwater.GDGG = attr.GDGG;
        Iwater.SLFX = attr.SLFX;
        Iwater.QDBM = attr.QDBM;
        Iwater.ZDBM = attr.ZDBM;
        Iwater.QDMS = attr.QDMS;
        Iwater.ZDMS = attr.ZDMS;
        Iwater.QDNDBG = attr.QDNDBG;
        Iwater.ZDNDBG = attr.ZDNDBG;
        Iwater.SFYY = attr.SFYY;
        Iwater.MSFS = attr.MSFS;
        Iwater.SZWZ = attr.SZWZ;
        Iwater.YXZT = attr.YXZT;
        Iwater.TCDW = attr.TCDW;
        Iwater.TCRQ = attr.TCRQ;
        Iwater.GSLX = attr.GSLX;
        Iwater.HJBM = attr.HJBM;
        Iwater.TFHID = attr.TFHID;
        Iwater.Remark = attr.Remark;
        Iwater.longth = attr.longth;
        // list.getView().setZoom(9)
        // list.getView().setCenter(JudgeCo[0])
        overlayZD.setPosition(JudgeCo[0]);
      }
    }
  });
};
// 关闭弹窗
const closePopupWater = () => {
  overlayZD.setPosition(undefined);
  ZDClick.getFeatures().clear();
};
</script>

<style lang="less" scoped>
/* 手写table */
.table-container {
  width: 100%;
  overflow: auto;
  overflow-x: hidden;
  // :deep(#hjg_data) {
  //   height: 350px;
  // }
}
#show_info_div {
  :deep(.table-container) {
    scrollbar-color: #0a163cc9 #80eeff; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.table-container::-webkit-scrollbar) {
    width: 2px;
    height: 4px; // 纵向滚动条 必写
    // border: 1px solid #0a163cc9;
  }
  :deep(.table-container::-webkit-scrollbar-thumb) {
    background-color: #80eeffce;
    // border: 1px dashed #888888;
    width: 2px;
    height: 80px;
  }
}
/* 首列固定 */
.table-container thead tr > th:first-child,
.table-container tbody tr > td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}
/* 表头固定 */
.table-container thead tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 2px solid #80eeff;
  border-right: 2px solid #80eeff;
  background: rgba(10, 22, 60, 0.7);
}

/* 表头首列强制最顶层 */
.table-container thead tr > th:first-child {
  z-index: 3;
}
/* 诊断--混接弹窗 */
.PCwater {
  position: absolute;
  font-size: 11px;
  top: 30%;
  // bottom: 0px;
  // right: 300px;
  max-height: 380px;
  min-height: 258px;
  width: 319px;
  background-color: #0a163cc9;
  border-radius: 5px;
  padding: 5px 0px 4px 9px;
  color: #80eeff;
  overflow: hidden;
  .td {
    width: 86px;
    // text-align: center;
    font-size: 12px;
  }
}

.bufferPoint {
  :deep(.contentPanePoint) {
    scrollbar-color: #5385b1 #0a163cc9; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.contentPanePoint::-webkit-scrollbar) {
    width: 5px;
    height: 4px; // 纵向滚动条 必写
  }
  :deep(.contentPanePoint::-webkit-scrollbar-corner) {
    background: rgba(0, 0, 0, 0);
  }
  :deep(.contentPanePoint::-webkit-scrollbar-thumb) {
    background-color: #5385b1;
    border-radius: 5px;
  }
}
.first_line {
  padding: 0 5px;
  height: 20px;
  width: 303px;
  line-height: 15px;
  font-size: 13px;
  border-bottom: 2px solid #80eeff;
}
.titleButton {
  position: absolute;
  top: 5px;
  cursor: pointer;
  right: 3px;
}
.close {
  margin-right: 5px;
  width: 15px;
  height: 15px;
  font-size: 20px;
  background: #ea4f70;
  border: 1px solid #fffbdf;
  line-height: 9px;
  color: white;
  border-radius: 2px;
}
/* 诊断通用表单 */
.info_box {
  :deep(#show_info_div) {
    scrollbar-color: #80eeff #0a163cc9; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(#show_info_div::-webkit-scrollbar) {
    width: 5px;
    height: 4px; // 纵向滚动条 必写
    border: 1px solid #80eeff;
  }
  :deep(#show_info_div::-webkit-scrollbar-thumb) {
    background-color: #0a163cc9;
    // border: 1px dashed #888888;
    width: 4px;
    height: 150px;
  }
}
/* 诊断专题点击绿色高亮样式 */
.map_list {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  text-align: center;
  width: 280px;
  .img_map_box {
    height: 56px;
    width: 60px;
    border: 1px solid #80eeff;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    .map_active {
      position: absolute;
      top: 39px;
      width: 58.4px;
      height: 16px;
      background-color: rgb(7, 247, 93);
      opacity: 0.85;
    }
    img {
      vertical-align: baseline;
    }
  }
  .img_map_box > img {
    width: 100%;
    height: 100%;
  }
}
.map_list > div {
  margin-top: 7px;
}
.list_title {
  height: 25px;
  border-bottom: 2px solid #72ed5c;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}
/* 诊断专题弹窗样式 */
#show_info_div {
  max-height: 393px;
  color: rgb(128, 238, 255);
  width: 369px;
  position: fixed;
  top: 88px;
  left: 9px;
  background: rgba(10, 22, 60, 0.79);
}
#show_info_div_a {
  height: 38px;
  color: rgb(128, 238, 255);
  width: 369px;
  position: fixed;
  top: 50px;
  left: 9px;
  background: rgba(10, 22, 60, 0.79);
  padding-left: 4px;
  z-index: 9999;
}
#show_ywinfo_table {
  width: 363px;
  max-height: 365px;
  margin: 0px 5px 4px 4px;
}
#table2 {
  font-size: 12px;
  width: 359px;
  border-right: 1px solid #80eeff;
  color: white;
}
#table2_b {
  font-size: 12px;
  width: 361px;
  border-right: 1px solid #80eeff;
  color: white;
}
#table2_a {
  font-size: 12px;
  width: 359px;
  border-right: 1px solid #80eeff;
  border-bottom: 1px solid #80eeff;
  color: white;
}
#table2_a_a {
  font-size: 12px;
  width: 361px;
  border-right: 1px solid #80eeff;
  border-bottom: 1px solid #80eeff;
  color: white;
}
.tr {
  height: 35px;
}
.th {
  text-align: center;
  border-left: 1px solid #80eeff;
  border-top: 1px solid #80eeff;
  border-bottom: 1px solid #80eeff;
}
.th_first {
  width: 35px;
}
.th_first_a {
  width: 43px;
}
.th_first_b {
  width: 47px;
}
.th_first_c {
  width: 41px;
}
.th_second {
  width: 100px;
}
.th_second_a {
  width: 89.5px;
}
.th_second_b {
  width: 98px;
}
.th_second_c {
  width: 114px;
}
.th_third {
  width: 55px;
}
.th_third_a {
  width: 107px;
}
.th_third_b {
  width: 95px;
}
.th_third_c {
  width: 68px;
}
.th_forth_a {
  width: 68px;
}
.th_forth_b {
  width: 63px;
}
.th_forth_c {
  width: 73px;
}
.tr_second {
  height: 28px;
}
.td_first {
  font-size: 12px;
  padding-right: 3px;
}
.td_forth {
  font-size: 12px;
  padding-right: 3px;
  color: #e8e210;
  cursor: pointer;
}
.td_forth span {
  padding-bottom: 1px;
  border-bottom: 1px solid #e8e210;
}
/* loading等待 */
.loding_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loding_img_change {
  display: none;
}
</style>
